<template>
	<view>
		<view class="header">
			<image src="../../static/images/arrow_left.png" mode=""  @click="goback"></image>

			<view class="header-b">
				<view class="box" @tap="$open('deal')">交易</view>
				<view class="box" style="color:#249af6; background-color: #FFFFFF;">欠数</view>
				<view class="box" @tap="$open('income')">收支</view>
				<view class="box" @tap="$open('stock')">库存</view>
			</view>
		</view>

		<view class="tabbar">
			<view class="tab-v">
				<view class="tabbar-o">应收款</view>
				<view class="tabbar-o">应退款</view>
				<view class="tabbar-o">欠货</view>
			</view>
			<view class="tab-v">
				<view class="tabbar-o red">￥{{ receivable }}</view>
				<view class="tabbar-o  mm">￥{{ payable }}</view>
				<view class="tabbar-o red  my">{{ owe_num }}</view>
			</view>
		</view>

		<view class="user">
			<view class="user-l">货品欠货明细</view>
			<view class="user-r">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{ array[index] }}</view>
				</picker>
				<image src="../../static/images/tb_down.png" mode=""></image>
			</view>
		</view>
		<view class="userOne" v-show="UserOne" @click="goad" v-for="(item,index) in goodList">
			<view class="use">
				<view class="useleft">
					<view class="pic">
						<dimg :src="item.cover"></dimg>
					</view>
					</view>
				<view class="txt">
					<view class="txtTop">{{item.title}}</view>
					<view class="txtbot">
						欠货：{{item.owe_num}}
						<text>欠款：¥{{item.store_num}}</text>
					</view>
				</view>
				<view class="box"><image src="../../static/images/arrow_right.png" mode=""></image></view>
			</view>
		</view>
		<view class="userTwo" v-show="UserTwo">
			<view class="shop" v-for="(item,index) in goodList">
				<view class="shoptop">
					<view class="pic">
						<dimg :src="item.cover"></dimg>
					</view>
					<view class="shopCenter">
						<view class="txt">{{item.title}}</view>
						<view class="txtTwo">
							欠数：{{item.owe_num}}
							<text>库存：¥{{item.store_num}}</text>
						</view>
					</view>
					<view class="shopBot"><image src="../../static/images/arrow_right.png" mode=""></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: 0,
			array: ['货品', '客户'],
			UserOne: true,
			UserTwo: false,
			page_size: '15',
			type: '1',
			receivable: '', //应收款,
			payable: '', //应退款
			owe_num: '', //欠货
			goodList:[]
		};
	},
	onLoad() {
		this.shoowAll();
	},
	methods: {
		bindPickerChange: function(e) {
			//console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			if (e.target.value == 0) {
				(this.UserOne = true), (this.UserTwo = false);
				this.type = 1;
				this.shoowAll();
			}
			if (e.target.value == 1) {
				(this.UserOne = false), (this.UserTwo = true);
				this.type = 2;
				this.shoowAll();
			}
		},
		shoowAll() {
			this.$ajax('api/v1.statistics/owe', {
				type: this.type,
				page_size: this.page_size
			})
				.then(res => {
					console.log(res);
					const { receivable, payable, owe_num } = res.result.total;
					this.receivable = receivable;
					this.payable = payable;
					this.owe_num = owe_num;
					this.goodList=res.result.page_list
				})
				.catch(res => {
					console.log(Error);
				});
		},
		goad(){
			uni.navigateTo({
				url:'../shopMall/OweCargoDetails'
			})
		},
		goback(){
			uni.navigateBack({
				delta:1
			})
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.header {
	background-color: #249af6;
	padding: 70rpx 30rpx 20rpx 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	image {
		width: 21rpx;
		height: 38rpx;
	}
	.header-b {
		width: 441rpx;
		height: 59rpx;
		border: 2rpx #ffffff solid;
		margin: 0 auto;
		display: flex;

		.box {
			width: 25%;
			text-align: center;
			border-right: 2rpx solid #ffffff;
			color: #ffffff;
			font-size: 32rpx;
			line-height: 58rpx;
			font-family: PingFang SC;
			&:last-child {
				border-right: none;
			}
		}
	}
}
.tabbar {
	width: 100%;
	height: 127rpx;
	background-color: #ffffff;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	padding-top: 40upx;
	.tab-v {
		display: flex;
		flex-direction: row;
		padding:0 30rpx;
		.tabbar-o{
			width: 33.33%;
			text-align: center;
		}
	}
}
.red {
	color: #f64444;
}
.user {
	height: 111rpx;
	line-height: 111rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	padding: 0 27rpx;
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 10rpx;
	}
	.user-r {
		display: flex;
		image {
			margin: 51rpx 30rpx;
			margin-right: 0;
		}
	}
}
.userOne {
	margin-top: 20rpx;
	overflow: hidden;
	position: relative;
	.box {
		image {
			position: absolute;
			width: 18rpx;
			height: 33rpx;
			right: 28rpx;
			top: 80rpx;
		}
	}
	.use {
		height: 193rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		overflow: hidden;
		display: flex;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		.useleft {
			width: 100rpx;
			height: 100rpx;
			border-radius: 9999rpx;
			margin: 53rpx 31rpx;
			overflow: hidden;
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
		.txt {
			.txtTop {
				margin-top: 51rpx;
				margin-bottom: 30rpx;
			}
			.txtbot {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(246, 68, 68, 1);
				text {
					margin-left: 203rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
				}
			}
		}
	}
}
.userTwo {
	margin-top: 20rpx;
	.shop {
		background-color: #f6f5f8ff;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		.shoptop {
			height: 211rpx;
			width: 100%;
			display: flex;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			image {
				width: 130rpx;
				height: 130rpx;
				margin: 40rpx 28rpx;
			}
			.shopCenter {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-top: 40rpx;
				.txtTwo {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(246, 68, 68, 1);
					margin-top: 57rpx;
					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
						margin-left: 99rpx;
					}
				}
			}
			.shopBot {
				image {
					width: 18rpx;
					height: 33rpx;
					position: absolute;
					top: 60rpx;
					right: 29rpx;
				}
			}
		}
	}
}

</style>
